<template>

  <div class="index">
    <search></search>
    <div class="swiper">
      <swiper indicator-dots autoplay>
        <block v-for="(item,index) in imgUrl" :key="index">
          <swiper-item>
            <image :src="item.image_src" class="slide-image" ></image>
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="menu" >
      <image v-for="(item,index) in menuUrl" :key="index" :src="item.image_src" class="menu_img"></image>
    </div>
    <div class="floor">
      <div class="floor_item" v-for="(item,index1) in floors" :key="index1">
        <div class="floor_head">
        <image :src="item.floor_title.image_src" mode="aspectFit"></image>
      </div>
      <div class="floor_body">
        <div class="body_left">
          <image :src="item.product_list[0].image_src"></image>
        </div>
        <div class="body_right">
          <image v-for="(item2,index2) in item.product_list" 
          :key="index2" 
          v-show="index2 != 0" 
          :src="item2.image_src"></image>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script>
import  request  from "../../utils/request.js"
import Search from "@/components/search"
import { getSwiper } from "@/api/index.js";
export default {
  components: {
    Search
  },
  data () {
    return {
      imgUrl: [],
      menuUrl:[],
      flUrl:[],
      flHead:[],
      floors:[]
    }
  },
  mounted () {
      // wx.request({
      //   url: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata', // 仅为示例，并非真实的接口地址
      //     success:(res) => {
      //       console.log(res.data.data)
      //       this.imgUrl = res.data.message
      //     }
      //   }),
      // request('https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata')
      getSwiper()
      .then(res => {
        console.log(res);
         console.log(res.data.message)
         this.imgUrl = res.data.message
      }),
         request.get('home/catitems')
      .then(res => {
         console.log(res.data.message)
         this.menuUrl = res.data.message
      })
         request.get('home/floordata')
      .then(res => {
         console.log(res.data.message)
         this.floors = res.data.message
      })

    }
  }

</script>


<style lang="scss" scoped>

  .swiper image{
    width: 750rpx;
    height: 100%;
  }
.menu{
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  padding: 24rpx 0 29rpx;
}
.menu .menu_img{
  
  width: 128rpx;
  height: 128rpx;
}
.floor{
  &_head{
    image{
    width: 100%;      
      height: 90rpx;
    }
  }
  &_body{
    display: flex;
    flex-wrap: nowrap;
    padding: 20rpx 0 20rpx 16rpx;
    .body_left{
      flex: 1;
      margin-right: 10rpx;
      image{
        width: 100%;
      }
    }
    .body_right{
    flex: 2;
    display: flex;
    flex-wrap: wrap;
      image{
        width: 48%;
        height: 48%;
        margin-right: 9rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>
